/**
 * @date: 2024/1/23
 * @author: 小红
 * @fileName: button
 * @Description: 按钮
 */

@use "util";

//定义变量
@include util.useThemeVar((
  button-text-color:(
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0.7)
  ),
  button-background-color:(
    var(--theme),
    var(--theme)
  ),
  button-hover-background-color:(
    lighten(#49b1f5, 10%),
    #fff
  )
));


@mixin button() {
  @keyframes slide-in-top {
    0% {
      transform: scale(0);
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  .button {
    @include util.flex-center;
    position: relative;
    border-radius: 10px;
    background-color: var(--theme);
    color: var(--button-text-color);
    transition: filter 0.35s, transform 0.35s;

    &:active {
      transform: scale(0.96);
    }

    &:hover {
      filter: hue-rotate(100deg);
    }

  }
}

@include button;